<template>
  <div class="hoterfilter">
    <!-- 面包屑导航 -->
    <div class="crunbs">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >酒店</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $store.state.hotel.cityName}}酒店预订</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 条件过滤的form表单 -->
    <el-form 
    :model="form" 
    label-width="80px" 
    class="searchForm">
    {{optionFilter}}
        <el-row type="flex" justify="space-between">
            <el-col :span="4">
                <el-autocomplete
                    class="inline-input"
                    v-model="form.searchCityName"
                    :fetch-suggestions="querySearch"
                    placeholder="切换城市"
                    :trigger-on-focus="false"
                    @select="handleSelect"
                    @blur="handleBlur">
                </el-autocomplete>
            </el-col>
            <el-col :span="10">
            <template>
                <div class="block">
                    <el-date-picker
                    style="width: 100%;"
                    v-model="changedate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="入住日期"
                    end-placeholder="离店日期"
                    :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </template>
            </el-col>
            <el-col :span="8">
                <el-popover
                placement="bottom"
                width="300"
                trigger="click">
                    <el-row type="flex" justify="space-between">
                        <el-col :span="9" style="margin-top: 3px">
                            人数
                        </el-col>
                        <el-col :span="15">
                            <el-row type="flex" justify="space-between" :gutter="20">
                                <el-dropdown>
                                    <el-input
                                        size="mini"
                                        suffix-icon="el-icon-arrow-down"
                                        readonly="readonly"
                                        :value="`${adult}` + ' 成人'">
                                    </el-input>
                                    <el-dropdown-menu slot="dropdown" style="width:100px">
                                        <el-dropdown-item 
                                        v-for="(item,key) in 7"
                                        :key="key"
                                        @click.native="checkAdult(item)"> {{item}} </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                &nbsp;&nbsp;
                                <el-dropdown>
                                    <el-input
                                        size="mini"
                                        suffix-icon="el-icon-arrow-down"
                                        readonly="readonly"
                                        :value="`${underAge}` + ' 儿童'">
                                    </el-input>
                                    <el-dropdown-menu slot="dropdown" style="width:100px">
                                        <el-dropdown-item 
                                        v-for="(item,index) in 5"
                                        :key="index"
                                        @click.native="checkUnderAge(item)"> {{item}} </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-input
                        placeholder="人数未定"
                        suffix-icon="el-icon-user"
                        :value="`${adult}` + ' 成人  ' + `${underAge}` + ' 儿童'"
                        readonly="readonly"
                        slot="reference">
                    </el-input>
                </el-popover>
            </el-col>
        </el-row>
        <el-row type="flex">
            <template>
                <div class="block" style="width: 100%; padding: 10px 0; margin-left: 10px;">
                    <span class="demonstration">价格</span>
                        <el-slider                    
                        v-model="form.price_lt"
                        :step="50"
                        :max="4000"
                        show-input>
                        </el-slider>
                </div>
            </template>
        </el-row>

        <!-- 酒店所有的下拉选项 -->
        <el-row 
        type="flex" 
        justify="space-between">
            <div class="hotelOptions">
                <!-- 酒店星级下拉框 -->
                <div class="options">
                    <p>酒店星级</p>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{ hotelLevelNum }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-checkbox-group 
                            v-model="form.hotelLevels"
                            >
                                <el-dropdown-item
                                v-for="(item,index) in otherOptions.hotellevel"
                                :key="index">
                                    <el-checkbox 
                                    :label="item.id" 
                                    style="width: 200px"
                                    >{{ item.name }}</el-checkbox>
                                </el-dropdown-item>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="options">
                    <p>酒店类型</p>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{ hotelTypeNum }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-checkbox-group 
                            v-model="form.hotelTypes"
                            >
                                <el-dropdown-item
                                v-for="(item,index) in otherOptions.hotelType"
                                :key="index">
                                    <el-checkbox 
                                    :label="item.id" 
                                    style="width: 200px"
                                    >{{ item.name }}</el-checkbox>
                                </el-dropdown-item>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="options">
                    <p>酒店设施</p>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{ hotelAssetNum }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-checkbox-group 
                            v-model="form.hotelAssets"
                            >
                                <el-dropdown-item
                                v-for="(item,index) in otherOptions.hotelAsset"
                                :key="index">
                                    <el-checkbox 
                                    :label="item.id" 
                                    style="width: 200px"
                                    >{{ item.name }}</el-checkbox>
                                </el-dropdown-item>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="options">
                    <p>酒店品牌</p>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{ hotelBrandNum }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-checkbox-group 
                            v-model="form.hotelBrands"
                            >
                                <el-dropdown-item
                                v-for="(item,index) in otherOptions.hotelBrand"
                                :key="index">
                                    <el-checkbox 
                                    :label="item.id" 
                                    style="width: 200px"
                                    >{{ item.name }}</el-checkbox>
                                </el-dropdown-item>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-row>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment'
export default {
    data() {
        return {
            hotelLevelNum: '选择',
            hotelTypeNum: '选择',
            hotelAssetNum: '选择',
            hotelBrandNum: '选择',
            // 成年人数量
            adult: 0,
            // 未成年数量
            underAge: 0,
            // 其他选项一些静态数据
            otherOptions: {
                hotellevel: [],
                hotelType:[],
                hotelAsset:[],
                hotelBrand:[]
            },
            // 表单绑定的日期
            changedate: '',
            // 表单查询的数据
            form: {
                searchCityName: '', //选中的城市名称
                searchCityId: '', //选中的城市ID
                enterTime: '', //入住时间
                leftTime: '', // 离开时间
                person: '', // 人数
                price_lt: 0, //酒店价格
                hotelLevels: [], //酒店星级
                hotelTypes: [], //酒店类型
                hotelAssets: [], // 酒店设施
                hotelBrands: [], //酒店品牌
            },
            // 获取到的城市信息
            cityArray:[],
            // 日期范围
            pickerOptions:{
                disabledDate: time => time.getTime() < Date.now() - 24 * 3600 * 1000
            }
        }
    },
    methods: {
        // 成年人人数下拉框事件
        checkAdult(item){
            this.adult = item;
        },
        // 未成年人数下拉框事件
        checkUnderAge(item){
            this.underAge = item;
        },
        // 进行城市查询
        async querySearch(queryString, cb){
            if(!queryString){
                cb([]);
                return;
            }
            let citys = await this.$axios({ url: '/cities', params: { name: queryString }})
            let cityArray = citys.data.data.map(ele => {
                ele.value = ele.name.replace('市','');
                return ele;
            });
            this.cityArray = cityArray;
            cb(cityArray);
        },
        // 选中城市
        handleSelect(item){
            setTimeout(() => {
                this.form.searchCityName = item.value;
                this.form.searchCityId = item.id;
                this.queryScenics();
            },200)
        },
        // 焦点离开城市
        handleBlur(){
            setTimeout(() => {
                if(this.cityArray.length > 0 && this.form.searchCityName){
                    this.form.searchCityName = this.cityArray[0].value;
                    this.form.searchCityId = this.cityArray[0].id;
                    this.queryScenics();
                }
            },100)
        },
        //查找城市区域
        async queryScenics(){
            let cityData = await this.$store.dispatch('hotel/searchCity',{ name: this.form.searchCityName } );
            let cityscenics = cityData.data.data[0].scenics;
            this.$store.commit('hotel/saveCityScenics',cityscenics);
        }
    },
    mounted(){
        this.$axios({
            url: '/hotels/options'
        }).then(res => {
            let {assets, brands, levels, types} = res.data.data;
            this.otherOptions.hotelAsset = assets;
            this.otherOptions.hotelBrand = brands;
            this.otherOptions.hotelType = types;
            this.otherOptions.hotellevel = levels;
        })
    },
    computed:{
        optionFilter(){
            if(this.changedate){
                let [enterTime,leftTime] = this.changedate;
                this.form.enterTime = moment(enterTime).format('YYYY-MM-DD');
                this.form.leftTime = moment(leftTime).format('YYYY-MM-DD');
            }else{
                this.form.enterTime = '';
                this.form.leftTime = '';
            }
            const filterArray = [
                { filter: this.form.searchCityName, data: this.form.searchCityId, name: 'city' },
                { filter: this.form.enterTime, data: this.form.enterTime, name: 'enterTime' },
                { filter: this.form.leftTime, data: this.form.leftTime, name: 'leftTime' },
                { filter: this.form.price_lt, data: this.form.price_lt, name: 'price_lt' },
                { 
                    filter: this.form.hotelLevels.length, 
                    data: this.form.hotelLevels, 
                    name: 'hotellevel_in',
                    fn: () => { this.hotelLevelNum =  `已选 ${this.form.hotelLevels.length} 项` }
                },
                { 
                    filter: this.form.hotelTypes.length, 
                    data: this.form.hotelTypes, 
                    name: 'hoteltype_in',
                    fn: () => { this.hotelTypeNum =  `已选 ${this.form.hotelTypes.length} 项` }
                },
                { 
                    filter: this.form.hotelAssets.length, 
                    data: this.form.hotelAssets, 
                    name: 'hotelasset_in',
                    fn: () => { this.hotelAssetNum =  `已选 ${this.form.hotelAssets.length} 项` }
                },
                { 
                    filter: this.form.hotelBrands.length, 
                    data: this.form.hotelBrands, 
                    name: 'hotelbrand_in',
                    fn: () => { this.hotelBrandNum =  `已选 ${this.form.hotelBrands.length} 项` }
                }
            ];

            let checks =  filterArray.filter(
                item => {
                    item.fn ? item.fn() : '';
                    return item.filter
                }
            );
            this.$emit('init',checks);
            return '';
        }
    }
}
</script>

<style scoped lang="less">
    .hoterfilter{
        height: 300px;
        .crunbs{
          height: 50px;
          .el-breadcrumb{
            line-height: 50px;
          }
        }
        // 内容检索表单
        .searchForm{
          width: 100%;
          height: 55px;
          .hotelOptions{
              width: 100%;
              height: 75px;
              border: 1px solid rgb(218, 212, 212);
              padding: 10px;
              display: flex;
              justify-content: space-around;
              box-sizing: border-box;
              .options{
                  flex:  0 0 22%;
                  border-right: 1px solid rgb(218, 212, 212);
                  padding-right: 15px;
                  .el-dropdown{
                      cursor: pointer;
                      margin-top: 7px;
                      width: 100%;
                      .el-dropdown-link{
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                      }
                  }
              }
              .options:last-child{
                  border-right: 0px;
              }
          }
        }
    }
    .el-dropdown-menu{
        max-height: 300px;
        overflow-y: auto;
    }
</style>